<!-- eslint-disable no-self-assign -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router"
import { onMounted, ref, computed, watch } from "@vue/runtime-core"
import axios from "axios"
import Toast from "vant/lib/toast";
import 'vant/es/toast/style'
import { useStoriesStore } from '@/store'

interface PriceTagsType {
    textColor: string
    bgColor: string
    text: string
}

interface ListType {
    name: string
}

interface SkusType {
    stock: string
    nowprice: number
}

interface ListTwo {
    index: string
    name: string
}

interface SkuListType {
    label: string
    image: string
}

interface RateTags {
    value: string
    num: string
}

interface RateInfoV2List {
    user: {
        avatar: string
        uname: string
    }
    content: string
}

interface ShopLabels {
    text: string
}

interface Commen {
    title: string
    price: string
    iid: string
    img: string
    finish: boolean
}


const store = useStoriesStore()
const { addOrder, addShoppingCart } = store
const route = useRoute()
const iid = route.query.itemId ?? ''
const router = useRouter()
const topImages = ref([])
const priceTags = ref<PriceTagsType[]>([])
const lowPrice = ref('')
const sales = ref('')
const title = ref('')
const sizeShow = ref(false)
const data1 = ref('')
const tupian = ref('')
const webIng = ref('')
const defaultPrice = ref('')
const jiage = ref('')
const totalStock = ref('')
const jianshu = ref('')
const seletedcolor = ref('')
const chima = ref('')
const list = ref<ListType[]>([])
const seleted = ref(true)
const skus = ref<SkusType[]>([])
const active = ref('')
const listTow = ref<ListTwo[]>([])
const data2 = ref('')
const skuList = ref<SkuListType[]>([])
const num = ref(1)
const finish = ref(false)
const shopName = ref('')
const finished = ref(true);
const itemId = ref('')
const cScore = ref('')
const rateTags = ref<RateTags[]>([])
const rateInfoV2List = ref<RateInfoV2List[]>([])
const shopLogo = ref('')
const saleDescV2 = ref('')
const shopLabels = ref<ShopLabels[]>([])
const detailImageList = ref([])
const shoucang = ref(true)
const sizeShow2 = ref(false)
const sizeShow3 = ref(false)
const id = ref(1)
const show = ref(false)
const commentObj = ref()
const commentArr = ref<Commen[]>([])


const getMerchandise = () => {
    axios
        .get(`https://apis.netstart.cn/mogujie/goods/detail?itemId=${iid}`)
        .then(({ data }) => {
            topImages.value = data.data.result.topImages
            priceTags.value = data.data.result.normalPrice?.priceTags?.map((i: PriceTagsType) => {
                return {
                    textColor: i.textColor,
                    bgColor: i.bgColor,
                    text: i.text
                }
            })
            lowPrice.value = data.data.result.itemInfo?.lowPrice
            sales.value = data.data.result.normalPrice?.sales
            title.value = data.data.result.itemInfo?.title
            webIng.value = data.data.result.webImOptionInfo?.option?.img
            defaultPrice.value = data.data.result.skuInfo?.defaultPrice
            totalStock.value = data.data.result.skuInfo?.totalStock
            list.value = data.data.result.skuInfo?.props[0]?.list?.map((i: ListType) => {
                return {
                    name: i.name
                }
            })
            listTow.value = data.data.result.skuInfo?.props[1]?.list?.map((i: ListTwo) => {
                return {
                    index: i.index,
                    name: i.name
                }
            })
            skus.value = data.data.result.skuInfo?.skus?.map((i: SkusType) => {
                return {
                    stock: i.stock,
                    nowprice: i.nowprice
                }
            })
            skuList.value = data.data.result.skuBarInfo?.list?.map((i: SkuListType) => {
                return {
                    label: i.label,
                    image: i.image
                }
            })
            shopName.value = data.data.result.shopInfo.name
            itemId.value = data.data.result.itemInfo.itemId
            cScore.value = data.data.result.rateInfoV2?.cScore
            rateTags.value = data.data.result.rateInfo?.rateTags?.map((i: RateTags) => {
                return {
                    value: i.value,
                    num: i.num
                }
            })
            rateInfoV2List.value = data.data.result.rateInfoV2?.list?.map((i: RateInfoV2List) => {
                return {
                    user: i.user,
                    avatar: i.user?.avatar,
                    uname: i.user.uname,
                    content: i.content
                }
            })
            shopLogo.value = data.data.result.shopInfo?.shopLogo
            saleDescV2.value = data.data.result.shopInfo?.saleDescV2
            shopLabels.value = data.data.result.shopInfo?.shopLabels?.map((i: ShopLabels) => {
                return {
                    text: i.text
                }
            })
            detailImageList.value = data.data.result.detailInfo?.detailImage[0]?.list
            console.log(data);
            finished.value = false
            show.value = true
        })
}

const showOrhide = (name: string, n: string) => {
    if (data1.value == n) {
        data1.value = ''
    } else {
        data1.value = n
        data1.value = name
    }
}

const seletedcolo = (name: string) => {
    seletedcolor.value = name
}

const nums = (s: string) => {
    jianshu.value = s
}

const getPrice = (data: number) => {
    // console.log(data);
    if (data?.toString().length >= 4) {
        const moneys = (data / 100).toFixed(3)
        jiage.value = moneys.substring(0, moneys.lastIndexOf('.') + 3)
        // const val = parseFloat(moneys).toFixed(2);
        return jiage.value
    }
    jiage.value = data + ''

}

const sizeChange = (name: string, n: string) => {
    if (data2.value == n) {
        data2.value = ''
    } else {
        data2.value = n
        active.value = name
    }

}

const chimas = (name: string) => {
    chima.value = name
}

const open2 = () => {
    if (seletedcolor.value) {
        router.push({ path: "/cart" })
        Toast('添加购物车成功')
        sizeShow.value = false
    } else {
        Toast('请选择商品规格')
    }
}

const buy = () => {
    if (seletedcolor.value) {
        router.push({ path: '/payment' })
    } else {
        Toast('请选择商品规格')
    }
}

const goCart = () => {
    if (seletedcolor.value) {
        // this.$router.push({ path: "/cart" })
        Toast('添加购物车成功')
        sizeShow2.value = false
    } else {
        Toast('请选择商品规格')
    }
}

const dataOne = (newcolor: string) => {
    if (skuList) {
        tupian.value = skuList.value?.filter((o) => {
            return o.label === newcolor
        })[0]?.image;
        //console.log(this.tupian);
    } else {
        tupian.value = webIng.value ?? ''
        // console.log(this.tupian);
    }
}

const setComment = () => {
    shoucang.value = !shoucang.value
    commentObj.value = {
        title: title,
        price: lowPrice,
        iid: iid,
        img: webIng,
        finish: finish
    }
    if (shoucang.value === false) {
        let index = commentArr.value.findIndex((i: any) => {
            return i.iid == commentObj.value.iid
        })
        if (index != -1) {
            commentArr.value.splice(index, 1)
        }
        commentArr.value = [commentObj.value, ...commentArr.value]
        localStorage.commentArr = JSON.stringify(commentArr.value)
        Toast('已收藏')
    } else {
        commentArr.value = commentArr.value.filter(i => i.iid != commentObj.value.iid)
        localStorage.commentArr = JSON.stringify(commentArr.value)
        Toast('取消收藏')
    }
}

const showOreHide = () => {
    commentArr.value.forEach(i => {
        if (i.iid == iid) {
            shoucang.value = !shoucang.value
        } else {
            shoucang.value = shoucang.value
        }
    })
}

const curreny = computed((data: number) => {
    if (data?.toString().length >= 4) {
        const moneys = (data / 100).toFixed(3);
        const val = moneys.substring(0, moneys.lastIndexOf('.') + 3)
        // const val = parseFloat(moneys).toFixed(2);
        return val;
    }
})

onMounted(() => {
    getMerchandise()
    let arr = localStorage.commentArr
    if (arr) {
        commentArr.value = JSON.parse(arr)
    }
    showOreHide()
})

watch(tupian, (newV: string, old) => {
    // console.log(111, newV, old);
})

</script>

<template>
    <div class="merchandise-box" v-if="show">
        <van-swipe :loop="false" :width="300">
            <van-swipe-item v-for="(item, index) in topImages" :key="index">
                <van-image :src="item" />
            </van-swipe-item>

        </van-swipe>

        <div class="itemInfo">
            <div class="price-box">
                <div class="price">¥{{ lowPrice }}
                    <span v-for="(l, i) in priceTags" :key="i"
                        :style="{ color: l.textColor, background: l.bgColor, fontSize: '12px' }">{{
                                l.text
                        }}</span>
                </div>
                <div class="sales">已售{{ sales }}</div>
            </div>
            <div class="title">{{ title }}</div>
        </div>
        <div class="color"></div>

        <div class="size-box">
            <div class="size" @click="sizeShow = true">选择 尺码</div>
            <div class="yunfei" style="font-size: 14px; color: #666;">免运费</div>
            <div class="fuwu" style="font-size: 14px; color: #666;">72小时发货 | 7天无理由退货 | 延误必赔</div>
        </div>
        <van-popup v-model:show="sizeShow" position="bottom" :close-on-click-overlay="true" round closeable
            close-icon-position="top-right" close-icon="closs" overlay :style="{ height: '60%' }">
            <div class="shangpin-box">
                <div class="shangpin-img">
                    <div class="img">
                        <van-image lazy-load :src="`${data1 ? tupian : webIng}`" style=" height: 120px;" />
                        <!-- <img :src="`${data1 ? tupian : webIng}`" style="width: 94px; height: 120px;"> -->
                    </div>
                    <div class="box">
                        <div class="shangpin-price" v-if="!data1">{{ defaultPrice }}
                        </div>
                        <div v-else class="shangpin-price">¥{{ jiage || curreny }}</div>
                        <div class="kucun" v-if="!data1">库存: {{ totalStock }}件</div>
                        <div v-else class="kucun">库存:{{ jianshu }}件</div>
                        <div class="change" v-if="!data1">请选择尺码颜色</div>
                        <div v-else class="change">已选: <span style="color:#ff4466">{{ seletedcolor }},{{ chima
                        }}</span></div>
                    </div>
                </div>
                <div class="neirou">
                    <div class="colo">颜色</div>
                    <div class="list-box">
                        <div class="list" v-for="(o, i) in list" :key="i"
                            @click="getPrice(skus[i]?.nowprice), dataOne(o.name), showOrhide(o.name, o.name), seleted = !seleted, seletedcolo(o.name), nums(skus[i]?.stock)"
                            :class="{ active: data1 == o.name }">{{ o.name
                            }}
                        </div>
                    </div>
                    <div class="chima">尺码</div>
                    <div class="chima-box">
                        <div class="chima-list" v-for="(p, i) in listTow" :key="i"
                            @click="getPrice(skus[i]?.nowprice), sizeChange(p.name, p.index), seleted = !seleted, chimas(p.name), nums(skus[i]?.stock)"
                            :class="{ active: data2 == p.index }">{{
                                    p.name
                            }}</div>
                    </div>
                    <div class="shuliang">数量</div>
                    <van-stepper v-model="num" theme="round" button-size="22" disable-input />
                    <div class="buy-box">
                        <div class="add-gouwuche" @click="addShoppingCart(
                            tupian,
                            chima,
                            jiage,
                            title,
                            seletedcolor,
                            shopName,
                            num,
                            finish,
                            iid,
                        ), open2()">加入购物车</div>
                        <div class="goumai" @click="addOrder(
                            tupian,
                            chima,
                            jiage,
                            title,
                            seletedcolor,
                            shopName,
                            num
                        )">立即购买</div>
                    </div>
                </div>
            </div>
        </van-popup>

        <div class="color"></div>

        <div class="evaluate-box">
            <div class="evaluate-top" @click="$router.push({ path: '/comments', query: { itemId: itemId } })">
                <div class="evaluate">评价({{ skus.length }})</div>
                <div class="score">评分<span>{{ cScore }} ></span></div>
            </div>
            <div class="evaluate-title">
                <div class="evaluate-list" v-for="(r, i) in rateTags" :key="i">
                    {{ r.value }}({{ r.num }})</div>
            </div>
            <div class="user-box">
                <div class="user" v-for="(u, i) in rateInfoV2List" :key="i">
                    <div class="box">
                        <div class="user-img">
                            <img :src="u.user?.avatar">
                        </div>
                        <div class="user-time">
                            <div class="user-name">{{ u.user?.uname }}</div>
                            <div class="time"></div>
                        </div>
                    </div>
                    <div class="user-title">{{ u.content }}</div>
                </div>

            </div>
        </div>
        <div class="color"></div>

        <div class="shop-box">
            <div class="shop-img">
                <img :src="shopLogo">
            </div>
            <div class="shop-news">
                <div class="name-box">
                    <div class="shop-name">{{ shopName }}</div>
                    <div class="shop-n" style="color: #666; font-size: 14px;">进店 ></div>
                </div>
                <div class="goods">{{ saleDescV2 }}</div>
                <div class="foot">
                    <div class="foot-text" v-for="(t, i) in shopLabels" :key="i">{{ t?.text
                    }}
                    </div>
                </div>
            </div>
        </div>
        <div class="color"></div>

        <div class="img-box">
            <div class="img-list" v-for="(l, i) in detailImageList" :key="i">
                <img :src="l">
            </div>
        </div>


        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" />
            <van-action-bar-icon v-if="shoucang" icon="star-o" text="收藏" color="#ff5000" @click="setComment" />
            <van-action-bar-icon v-else icon="star" text="已收藏" color="#ff5000" @click="setComment" />
            <van-action-bar-button type="warning" text="加入购物车" @click="sizeShow2 = true" />
            <van-action-bar-button type="danger" text="立即购买" @click="sizeShow3 = true" />
        </van-action-bar>
        <van-popup v-model:show="sizeShow2" position="bottom" :close-on-click-overlay="true" round closeable
            close-icon-position="top-right" close-icon="closs" overlay :style="{ height: '60%' }">
            <div class="shangpin-box">
                <div class="shangpin-img">
                    <div class="img">
                        <van-image lazy-load :src="`${data1 ? tupian : webIng}`" style=" height: 120px;" />
                        <!-- <img :src="`${data1 ? tupian : webIng}`" style="width: 94px; height: 120px;"> -->
                    </div>
                    <div class="box">
                        <div class="shangpin-price" v-if="!data1">{{ defaultPrice }}
                        </div>
                        <div v-else class="shangpin-price">¥{{ jiage }}</div>
                        <div class="kucun" v-if="!data1">库存: {{ totalStock }}件</div>
                        <div v-else class="kucun">库存:{{ jianshu }}件</div>
                        <div class="change" v-if="!data1">请选择尺码颜色</div>
                        <div v-else class="change">已选: <span style="color:#ff4466">{{ seletedcolor }},{{ chima
                        }}</span></div>
                    </div>
                </div>
                <div class="neirou">
                    <div class="colo">颜色</div>
                    <div class="list-box">
                        <div class="list" v-for="(o, i) in list" :key="i"
                            @click="dataOne(o.name), showOrhide(o.name, o.name), seleted = !seleted, seletedcolo(o.name), nums(skus[i]?.stock), getPrice(skus[i]?.nowprice)"
                            :class="{ active: data1 == o.name }">{{ o.name
                            }}
                        </div>
                    </div>
                    <div class="chima">尺码</div>
                    <div class="chima-box">
                        <div class="chima-list" v-for="(p, i) in listTow" :key="i"
                            @click="sizeChange(p.name, p.index), seleted = !seleted, chimas(p.name), nums(skus[i]?.stock), getPrice(skus[i]?.nowprice)"
                            :class="{ active: data2 == p.index }">{{
                                    p.name
                            }}</div>
                    </div>
                    <div class="shuliang">数量</div>
                    <van-stepper v-model="num" theme="round" button-size="22" disable-input />
                    <div class="queren" @click="addShoppingCart(
                        tupian,
                        chima,
                        jiage,
                        title,
                        seletedcolor,
                        shopName,
                        num,
                        finish,
                        iid,
                    ), goCart()">确认</div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model:show="sizeShow3" position="bottom" :close-on-click-overlay="true" round closeable
            close-icon-position="top-right" close-icon="closs" overlay :style="{ height: '60%' }">
            <div class="shangpin-box">
                <div class="shangpin-img">
                    <div class="img">
                        <van-image lazy-load :src="`${data1 ? tupian : webIng}`" style=" height: 120px;" />
                        <!-- <img :src="`${data1 ? tupian : webIng}`" style="width: 94px; height: 120px;"> -->
                    </div>
                    <div class="box">
                        <div class="shangpin-price" v-if="!data1">{{ defaultPrice }}
                        </div>
                        <div v-else class="shangpin-price">¥{{ jiage }}</div>
                        <div class="kucun" v-if="!data1">库存: {{ totalStock }}件</div>
                        <div v-else class="kucun">库存:{{ jianshu }}件</div>
                        <div class="change" v-if="!data1">请选择尺码颜色</div>
                        <div v-else class="change">已选: <span style="color:#ff4466">{{ seletedcolor }},{{ chima
                        }}</span></div>
                    </div>
                </div>
                <div class="neirou">
                    <div class="colo">颜色</div>
                    <div class="list-box">
                        <div class="list" v-for="(o, i) in list" :key="i"
                            @click="dataOne(o.name), showOrhide(o.name, o.name), seleted = !seleted, seletedcolo(o.name), nums(skus[i]?.stock), getPrice(skus[i]?.nowprice)"
                            :class="{ active: data1 == o.name }">{{ o.name
                            }}
                        </div>
                    </div>
                    <div class="chima">尺码</div>
                    <div class="chima-box">
                        <div class="chima-list" v-for="(p, i) in listTow" :key="i"
                            @click="sizeChange(p.name, p.index), seleted = !seleted, chimas(p.name), nums(skus[i]?.stock), getPrice(skus[i]?.nowprice)"
                            :class="{ active: data2 == p.index }">{{
                                    p.name
                            }}</div>
                    </div>
                    <div class="shuliang">数量</div>
                    <van-stepper v-model="num" theme="round" button-size="22" disable-input />
                    <div class="queren" @click="addOrder(
                        tupian,
                        chima,
                        jiage,
                        title,
                        seletedcolor,
                        shopName,
                        num
                    ), buy()">确认</div>
                </div>
            </div>
        </van-popup>

        <div class="right">
            <div class="home" @click="$router.push({ path: '/' })">
                <van-icon color="#fff" name="wap-home-o" />
            </div>
            <div class="crat" @click="$router.push({ path: '/cart' })">
                <van-icon color="#fff" name="shopping-cart-o" />
            </div>
        </div>
        <div class="back" @click="$router.go(-1)">
            <van-icon color="#fff" name="arrow-left" />
        </div>

    </div>
    <van-loading size="24px" vertical v-if="finished">加载中...</van-loading>
</template>


<style lang="scss" scoped>
:deep(.van-swipe-item) {
    width: 100vw;

    img {
        width: 100%;
        height: 100%;
    }
}

:deep(.van-loading.van-loading--circular.van-loading--vertical) {
    padding-top: 200px;
}

:deep(.van-loading--vertical) {
    padding-top: 200px;
}

:deep(.van-stepper) {
    margin-left: 5px;
}

.v-modal {
    position: relative;
}

.right {
    position: fixed;
    top: 90px;
    right: 10px;

    .home,
    .crat {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 999px;
        text-align: center;
        margin-bottom: 10px;
        background-color: rgb(0, 0, 0, .3);
    }
}

.back {
    position: fixed;
    top: 14px;
    left: 24px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 999px;
    text-align: center;
    margin-bottom: 10px;
    background-color: rgb(0, 0, 0, .3);
}

.queren {
    z-index: 1;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    line-height: 50px;
    background-color: #ff4466;
    color: #fff;
    font-size: 28px;
    text-align: center;
}

.component-detail {
    display: flex;
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .component-swiper-image {
        width: 300px;
        height: 450px;
        flex-shrink: 0;
        margin: 10px;



        img {
            display: block;
            width: 100%;
            // height: 100%;
        }
    }
}

.foot-bar {
    display: flex;
    position: fixed;
    width: 100vw;
    bottom: 0;
    left: 0;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;

    .dianpu,
    .kefu,
    .shoucang {
        width: 15vw;
        height: 55px;
        line-height: 55px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .add-gouwuche,
    .goumai {
        width: 27.5vw;
        height: 55px;
        line-height: 55px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .add-gouwuche {
        background-color: rgb(255, 236, 239);
        color: #ff4466;
    }

    .goumai {
        background-color: #ff4466;
        color: #fff;
    }

}


:deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 0;
}

:deep(.van-swipe) {
    position: relative;

    .custom-indicator {
        position: absolute;
        bottom: 5px;
        right: 8px;
        background: #fffaf059;
        padding: 3px 5px;
        border-radius: 5px;
    }
}

:deep(.van-swipe__track) {
    position: relative;
    display: flex;

}

:deep(.el-input-number) {
    padding-bottom: 60px;
}

.colo,
.chima,
.shuliang {
    margin: 10px 0 10px 5px;
    color: #777;
    font-size: 12px;
}

.buy-box {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 1;

    .add-gouwuche,
    .goumai {
        flex: 0 0 50%;
        width: 27.5vw;
        height: 55px;
        line-height: 55px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .add-gouwuche {
        background-color: rgb(255, 236, 239);
        color: #ff4466;
    }

    .goumai {
        background-color: #ff4466;
        color: #fff;
    }
}

.chima-box {
    display: flex;
    flex-wrap: wrap;

    .chima-list {
        flex: 0 0 20%;
        margin-left: 5px;
        margin-top: 5px;
        padding: 5px;
        white-space: nowrap;
        text-align: center;
        background: #f9f9f9;
        border-radius: 5px;
    }

    .active {
        color: #ff4466;
        border: 1px solid #ff4466;
    }
}

.list-box {
    display: flex;
    flex-wrap: wrap;

    .list {
        flex: 0 0 35%;
        background: #f9f9f9;
        padding: 7px;
        white-space: nowrap;
        margin-bottom: 10px;
        margin-left: 5px;
        text-align: center;
        border-radius: 5px;
    }

    .active {
        color: #ff4466;
        border: 1px solid #ff4466;
    }
}

.shangpin-img {
    display: flex;
    position: fixed;
    width: 100vw;
    background-color: #fff;

    .box {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 8px;
    }


    .img {

        img {
            width: 120px;
        }
    }
}

.neirou {
    padding-top: 125px;
    padding-bottom: 60px;
}


.size-box {
    display: flex;
    height: 90px;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 5px;

    .fuwu {
        margin-bottom: 15px;
    }
}

.itemInfo {
    background-color: #fff;
    margin-bottom: 20px;

    .price-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
        margin-bottom: 15px;

        .price {
            margin-left: 5px;
            font-size: 18px;
            font-weight: bold;
        }

        .sales {
            margin-right: 5px;
            font-size: 12px;
            color: #777;
        }
    }

    .title {
        margin-left: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

.evaluate-box {
    margin-bottom: 15px;
    margin-left: 5px;

    .evaluate-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
    }

    .evaluate-title {
        display: flex;
        width: 100vw;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none
        }

        .evaluate-list {
            padding: 3px 5px;
            margin-left: 3px;
            margin-top: 5px;
            margin-bottom: 7px;
            background-color: #fff6f6;
            border-radius: 4px;
            white-space: nowrap;
        }
    }

    .user-box {
        display: flex;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none
        }

        .user {
            width: 300px;
            height: 108px;
            flex: 0 0 300px;
            margin-left: 10px;
            background: #FAFAFAFA;
        }

        .box {
            display: flex;
            align-items: center;
            margin-top: 10px;
            margin-left: 5px;

            .user-name {
                margin-left: 5px;
            }

            .user-img {
                width: 45px;
                height: 45px;
                overflow: hidden;
                border-radius: 999px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

        }

        .user-title {
            margin-top: 7px;
            margin-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

    }

}

.shop-box {
    display: flex;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 5px;

    .shop-img {
        width: 60px;
        height: 60px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .shop-news {
        flex: 0 0 268px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 8px;
        height: 60px;

        .name-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .goods {
            color: #777;
            font-size: 12px;
        }

        .foot {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .foot-text {
                border: 1px solid #ccc;
                padding: 3px 5px;
                color: #ff4466;
                font-size: 12px;
                border-radius: 999px;
                text-align: center;
            }
        }
    }
}

.img-box {
    margin-bottom: 15px;
    padding-bottom: 45px;

    .img-list {
        width: 100vw;

        img {
            width: 100%;
        }
    }
}

.bottom {
    padding-bottom: 55px;

    .shangpin {
        margin-bottom: 15px;
        margin-left: 8px;


    }

    .chanshu {
        width: 94vw;
        background: #f6f6f6;
        margin: 0 auto;
        padding: 10px;
        line-height: 22px;

        div {

            span {
                margin-right: 7px;
                color: #777;

            }

            font-size: 12px;
        }
    }
}

:deep(.el-drawer.btt) {
    width: 100vw;
}

:deep(.el-drawer__header) {
    text-align: center;
}

.bottom-size {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    border-bottom: 1px solid #777;
}

.shiji {
    margin: 15px 0;
    text-align: center;
    color: #777;
    font-size: 12px;
}

.color {
    margin-bottom: 15px;
    width: 100vw;
    height: 8px;
    background-color: #f9f9f9;
}
</style>

